<template>
  <div
      class="tree-node"
      :class="nodeClasses"
      :data-type="node.nodeType"
      draggable="true"
      @dragstart="handleDragStart"
      @dragover="handleDragOver"
      @dragenter="handleDragEnter"
      @drop="handleDrop"
      @dragend="handleDragEnd"
  >
    <div class="node-content" @click="handleNodeClick">
      <div class="node-icon">
        <i :class="nodeIcon"></i>
      </div>
      <div class="node-info">
        <div class="node-name">{{ node.nodeName }}</div>
        <div class="node-type">{{ nodeTypeText }}</div>
        <div v-if="node.factorCode" class="node-factor">{{ node.factorCode }}</div>
      </div>
      <div class="node-actions">
        <el-button size="mini" type="success" plain @click.stop="handleAddChild" icon="el-icon-plus">添加</el-button>
        <el-button size="mini" type="primary" plain @click.stop="handleEdit" icon="el-icon-edit">编辑</el-button>
        <el-button size="mini" type="danger" plain @click.stop="handleDelete" icon="el-icon-delete">删除</el-button>
      </div>
    </div>

    <div class="node-children" v-if="node.children && node.children.length > 0">
      <div class="children-container">
        <TreeNode
            v-for="child in node.children"
            :key="child.id"
            :node="child"
            :parent="node"
            :selected-node="selectedNode"
            @select="$emit('select', $event)"
            @update="$emit('update', $event)"
            @add-child="$emit('add-child', $event)"
            @delete="handleDeleteChild"
            @drag-start="$emit('drag-start', $event)"
            @drop="$emit('drop', $event)"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { computed } from 'vue'

export default {
  name: 'TreeNode',
  props: {
    node: {
      type: Object,
      required: true
    },
    selectedNode: {
      type: Object,
      default: null
    },
    parent: {
      type: Object,
      default: null
    }
  },
  emits: ['select', 'update', 'delete', 'add-child', 'drag-start', 'drop'],
  setup(props, { emit }) {
    const nodeClasses = computed(() => ({
      'tree-node': true,
      'has-children': props.node.children && props.node.children.length > 0,
      'is-root': true,
      'draggable': true,
      'selected': props.selectedNode && props.selectedNode.id === props.node.id
    }))

    const nodeIcon = computed(() => {
      switch (props.node.nodeType) {
        case 'BASIC':
          return 'el-icon-document'
        case 'DERIVED':
          return 'el-icon-cpu'
        case 'STYLE':
          return 'el-icon-star-on'
        case 'COMBINATION':
          return 'el-icon-connection'
        default:
          return 'el-icon-folder'
      }
    })

    const nodeTypeText = computed(() => {
      switch (props.node.nodeType) {
        case 'BASIC':
          return '基础因子'
        case 'DERIVED':
          return '衍生因子'
        case 'STYLE':
          return '风格因子'
        case 'COMBINATION':
          return '组合节点'
        default:
          return '未知类型'
      }
    })

    const handleNodeClick = () => {
      emit('select', props.node)
    }

    const handleAddChild = () => {
      console.log('TreeNode: 添加子节点到:', props.node);
      emit('add-child', props.node)
    }

    const handleEdit = () => {
      emit('select', props.node)
    }

    const handleDelete = () => {
      console.log('TreeNode: 删除节点:', props.node);
      emit('delete', props.node)
    }

    const handleDeleteChild = (childNode) => {
      emit('delete', childNode)
    }

    const handleDragStart = (e) => {
      console.log('TreeNode: 拖拽开始', props.node.nodeName);
      e.dataTransfer.effectAllowed = 'move';
      e.stopPropagation(); // 阻止事件冒泡，避免多次触发
      emit('drag-start', { node: props.node, parent: props.parent, event: e });
    }

    const handleDragOver = (e) => {
      e.preventDefault()
    }

    const handleDragEnter = (e) => {
      e.preventDefault()
    }

    const handleDrop = (e) => {
      console.log('TreeNode: 拖拽释放', props.node.nodeName);
      e.preventDefault();
      e.stopPropagation(); // 阻止事件冒泡，避免多次触发
      emit('drop', { node: props.node, parent: props.parent, event: e });
    }

    const handleDragEnd = (e) => {
      // Handle drag end if needed
    }

    return {
      nodeClasses,
      nodeIcon,
      nodeTypeText,
      handleNodeClick,
      handleAddChild,
      handleEdit,
      handleDelete,
      handleDeleteChild,
      handleDragStart,
      handleDragOver,
      handleDragEnter,
      handleDrop,
      handleDragEnd
    }
  }
}
</script>

<style scoped>
.tree-node {
  margin: 8px 0;
  transition: all 0.3s ease;
}

.tree-node.draggable {
  cursor: grab;
}

.tree-node.draggable:active {
  cursor: grabbing;
}

.tree-node.selected .node-content {
  border-color: #409eff;
  background: rgba(64, 158, 255, 0.1);
  box-shadow: 0 4px 15px rgba(64, 158, 255, 0.3);
}

.node-content {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  background: white;
  border: 2px solid #e1e8ed;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  border-left: 4px solid var(--bar-color, #409eff);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.node-content:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}
/* 不同类型节点的左侧条颜色 */
.tree-node[data-type="BASIC"]      { --bar-color: rgba(58, 194, 90, 0.66); }
.tree-node[data-type="DERIVED"]    { --bar-color: rgba(219, 230, 60, 0.75); }
.tree-node[data-type="STYLE"]      { --bar-color: rgba(245, 149, 108, 0.81); }
.tree-node[data-type="COMBINATION"]{ --bar-color: rgba(157, 147, 251, 0.81); }
.node-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--bar-color);
  color: rgba(102, 126, 234, 0.54);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 14px;
  font-size: 16px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.node-info {
  flex: 1;
  min-width: 0;
}

.node-name {
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 4px;
  font-size: 14px;
}

.node-type {
  font-size: 12px;
  color: #7f8c8d;
  margin-bottom: 2px;
}

.node-factor {
  font-size: 11px;
  color: #95a5a6;
  font-family: monospace;
}

.node-actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.node-content:hover .node-actions {
  opacity: 1;
}

.node-children {
  margin-left: 30px;
  position: relative;
}

.node-children::before {
  content: '';
  position: absolute;
  left: -15px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #e1e8ed;
}

.children-container {
  position: relative;
}

.children-container::before {
  content: '';
  position: absolute;
  left: -15px;
  top: 20px;
  width: 13px;
  height: 2px;
  background: #e1e8ed;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .node-content {
    padding: 10px 12px;
  }

  .node-actions {
    opacity: 1;
  }

  .node-children {
    margin-left: 20px;
  }
}
</style>